<template>
  <div class="page-container" v-if="show">
    <div class="no-more-box">
      <el-button type="primary" size="small" icon="el-icon-plus" class="no-more">您还没有添加用户信息，请添加</el-button>
    </div>
  </div>
  <div class='merchant-page page-container' v-else>
    <breadcrumb-com text="用户详情"></breadcrumb-com>
    <div class="main-container">
      <div class="head">
        <el-form ref="form" label-width="80px" :rules="rules" :form=form>
          <div class="tab-box">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <!-- 基础信息 一个pane -->
                <el-tab-pane label="基础信息" name="base">
                  <!-- 基本资料 -->
                  <el-row  class="my-form-row">
                    <el-col :span="4" class="my-el-col my-el-col-left">
                        基本资料
                    </el-col>
                    <el-col :span="20" class="my-el-col my-el-col-right">
                      <el-form-item label="民宿名称" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <el-input></el-input>
                             <p class="form-item-desc">这是一段描述</p>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="描述信息" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <el-input></el-input>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="电话号码" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <el-input></el-input>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="营业时间" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <el-input></el-input>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="橱窗图" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <!-- 插入图片已封装好的图片上传组件 -->
                            <upload-img :uplimit="3" :multiple="false" :fileList='form.fileList' @putImg="changeImgList"></upload-img>
                          </el-col>
                        </el-row>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <!-- 基本资料结束 -->
                  <!-- 标签 -->
                  <el-row  class="my-form-row">
                    <el-col :span="4" class="my-el-col my-el-col-left">
                        标签
                    </el-col>
                    <el-col :span="20" class="my-el-col my-el-col-right">
                      <el-form-item label="设施标签" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <el-input></el-input>
                          </el-col>
                        </el-row>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 其他 -->
                  <el-row  class="my-form-row">
                    <el-col :span="4" class="my-el-col my-el-col-left">
                        其他
                    </el-col>
                    <el-col :span="20" class="my-el-col my-el-col-right">
                      <el-form-item label="热度" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <el-input></el-input>
                          </el-col>
                        </el-row>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>

                <!-- 详情 -->
                <el-tab-pane label="个人详情" name="detail">
                  <editor-com class="editor" ref="editor" :content="form.content"></editor-com>
                </el-tab-pane>

                <!-- 地址详情 -->
                <!-- <el-tab-pane label="地址详情" name="address">
                  <el-row  class="my-form-row">
                    <el-col :span="4" class="my-el-col my-el-col-left">
                        地址
                    </el-col>
                    <el-col :span="20" class="my-el-col my-el-col-right">
                      <el-form-item label="地址详情" size="mini">
                        <el-row>
                          <el-col :span="20">
                            <el-input></el-input>
                             <p class="form-item-desc">这是一段描述</p>
                          </el-col>
                        </el-row>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row  class="my-form-row nav-row">
                    <el-col :span="4" class="my-el-col my-el-col-left">
                      选取坐标
                    </el-col>
                    <el-col :span="20" class="my-el-col my-el-col-right">
                      <el-row class="nav-row">
                        <el-col :span="5">
                          <el-form-item label="经度" size="mini">
                            <el-input value=""></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="5">
                          <el-form-item label="纬度" size="mini">
                            <el-input value=""></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="搜索选址" size="mini">
                            <el-input value="1" type="text" v-model="form.searcMap">
                              <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                            <p class="form-item-desc">输入地点，选取地址</p>
                          </el-form-item>
                        </el-col>
                        <el-col :span="2">
                          <el-form-item label="" size="mini">
                            <el-button type="primary" icon="el-icon-place">定位</el-button>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-tab-pane> -->
              </el-tabs>
          </div>
          <!-- 长长的分哥线 -->
          <el-divider></el-divider>
          <!-- 保存 -->
          <el-button type="primary" size="small" icon="el-icon-plus" @click="onSubmit()">保存</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import breadcrumbCom from '@/components/comtwo/breadcrumb/breadcrumb'
import uploadImg from '@/components/comtwo/upload/UploadImg'
import editorCom from '@/components/comtwo/editor/editor'
export default {
  components: {
    uploadImg,
    editorCom
  },
  data () {
    return {
      show: false,
      activeName: 'base', // 默认显示pane
      // 规则列表
      rules: {
        name: { required: true, message: '请输入活动名称', trigger: 'blur' }
      },
      // 数据列表
      form: {
        // 组件的数据单独列出，方便组件传值存取，子组件不可以通过props传值给父组件。
        fileList: [ // 图片地址表
        ],
        content: '', // 详情富文本
      },
      // searcMap: '', // 地址坐标
    }
  },
  methods: {
    // 切换Tab标签时的事件，当tab切换时，要保存富文本中的内容到content中，在保存或者切换时都需要主动去获取富文本中content的值。子组件无法主动传值给父组件。
    handleClick (tab, event) {
      let _this = this
      // 获取子组件富文本中的值,这样才能保证切换 tab时content的值
      let content = _this.$refs.editor.baseData
      _this.form.content = content
    },
    // 子组件绑定的方法，将子组件传递过来的值push到imglist中
    changeImgList (data) {
      console.log(data)
      let imgArr = {}
      imgArr['name'] = data.name
      imgArr['url'] = data.response.url
      this.form.fileList.push(imgArr) // 获取图片地址
    },
    // 提交数据时。
    onSubmit() {
      let _this = this
      // 获取子组件富文本中的值,此时form中的content不一定就是富文本中的content，直接点保存是没有获取的情况下。
      _this.form.content = _this.$refs.editor.baseData
      let obj = _this.form
      console.log(obj)
    }
  }
}
</script>

<style scoped>
.no-more-box {
  width: 100%;
  height: 5rem;
  text-align: center;
}
.no-more {
  margin: 0 auto;
}
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .nav-row {
    height: 300px;
  }
</style>
